#{extends 'main.html'/}
<style>
<!--
#but .l-button{display: inline;float: left;margin-left: 10px;width: auto;line-height: 23px;height: 23px;}
-->
</style>
<script type="text/javascript">
	var manager,detailWin;
	$(function (){
		$("#mainform").ligerForm({		
			toJSON: JSON2.stringify
	    }); 
		menuJosn = $("#menuJson").val();
	    manager = $("#maingrid").ligerGrid({
	        columns: [
	            { display:'',name:'id',width:5,hide:true},
	            { display:'',name:'parentId',width:5,hide:true},
	            { display:'',name:'parentText',width:5,hide:true},
	            { display: '菜单描述', name: 'text', width: 250, align: 'left', editor: { type: 'text'} },
				{ display: '连接地址', name: 'url', width: 250, type: 'text', align: 'left',editor: { type: 'text'} },
				{ display: '操作', isSort: false, width: 120, 
					render: function (rowdata, rowindex, value){
	                    var h = "";
	                    if (!rowdata._editing)
	                    {
	                        h += "<a href='javascript:beginEdit(" + rowindex + ")'>修改</a> ";
	                        h += "<a href='javascript:deleteRow(" + rowindex + ")'>删除</a> "; 
	                    }
	                    return h;
	                }
	           }
	        ], 
	        tree: { columnName: 'text' }, 
			width: '100%', 
			usePager:false,
			height: '90%',
	       	url: "/symenu/menuJson", 
	        method:"get",
			alternatingRow: true, 
			checkbox: false,
	        autoCheckChildren: false,
	        enabledEdit: true,
	        clickToEdit: false,
            toolbar: { items: [
                  { text: '添加菜单', click: addMenu, icon: 'add' }
            ] }
	        
	    });

	});
	
    function addMenu(){
    	showDetail({});
    }

	//修改
    function beginEdit() {
        var row = manager.getSelectedRow();
        if (!row) { alert('请选择行'); return; }
        showDetail(row);
    }
	//删除行
    function deleteRow()
    { 
    	var row = manager.getSelectedRow();
        if (!row) { alert('请选择行'); return; }
		$.ajax({
			url: "/symenu/del?id="+row.id,
		    type: 'DELETE',                  
		    loading: '正在删除中...',                  
		    success: function () {
		        //LG.showSuccess('删除成功');
		        LG.tip('删除成功!');
		        manager.deleteSelectedRow();
		    },
		    error: function () {
		        LG.tip("删除失败");
		    }
		});
       
    }
	
	function showDetail(data){
		currentData = data;
		fromClear("mainform");
        if (detailWin)
        {
            detailWin.show(); 
        }
        else{
            //创建表单结构
            detailWin = $.ligerDialog.open({
                target: $("#detail"),
                width:400, height: 300, top:5,
                buttons: [
                { text: '确定', onclick: function () { $("#mainform").submit(); } },
                { text: '取消', onclick: function () { detailWin.hide(); } }
                ]
            });
        }
        if (currentData){
        	loadData(currentData);
        	loadDataSelect("parentId",currentData.parentId,currentData.parentText);
        }
        
        formSumit({
    		  formId : "mainform",
    		  url :'/symenu/save',
    		  grid:manager,
    		  dialog :detailWin,
    		  sumitSuccess :addParentSuccess,
    		  beforeSubmit : null
    	  });
	}
	
	//添加父菜单成功后，向父菜单下拉框添加option,避免刷新页面.(parentId)
	function addParentSuccess(){
		location.reload();
	}


</script>
<div id="maingrid" style="margin-top:10px"></div> <br />
<div id="detail" style="display:none;">
	<form method="post" id="mainform" class="l-form">
		<input type="hidden" name="symenu.id" id="id" value="">
		<ul>
			<li style="width: 60px; text-align: left;">菜单描述</li>
			<li style="width: 200px; text-align: left;">
				<div class="l-text" style="width: 178px;">
					<input type="text"  id="text" name="symenu.text"
						validate="{required:true,minlength:2,maxlength:100}" 
						ligerui="{width:178}">
				</div>
			</li>
		</ul>
		<ul>
			<li style="width: 60px; text-align: left;">菜单连接</li>
			<li style="width: 200px; text-align: left;">
				<div class="l-text-wrapper" style="width: 178px;">
					<div class="l-text l-text-date" style="width: 178px;">
						<input id="url" name="symenu.url"  ligerui="{width:178}"
						  validate="{required:false}">
					</div>
				</div>
			</li>
			<li style="width: 10px;"></li>
		</ul>
		<ul>
			<li style="width: 60px; text-align: left;">父节点</li>
			<li style="width: 180px; text-align: left;">
				<select name="symenu.parentMenu.id" id="parentId" style="width: 178px;">
					<option value=""></option>
					#{list symenus ,as : 'symenu'}
					<option value="${symenu.id}">${symenu.text}</option>
					#{/list}
				</select>
			</li>
		</ul>
	</form>

</div>

